import React, { useState } from 'react';
import { Modal, ModalProps } from 'antd';
import { ModalFunc } from '@/interface/common.interface';

interface CustomModalProps extends ModalFunc {
  children?: any;
  modalProps?: ModalProps;
  Component: any;
}

export default function CustomModal(props: CustomModalProps) {
  const { children, modalProps = {}, Component, onOk, onCancel } = props;
  const [visible, setVisible] = useState<boolean>(false);

  function showModal(isVisible: boolean) {
    setVisible(isVisible);
  }

  function handleOk(value: any) {
    showModal(false);
    onOk?.(value);
  }

  function handleCancel() {
    showModal(false);
    onCancel?.();
  }

  return (
    <>
      {React.cloneElement(children, {
        onClick: () => setVisible(true),
      })}
      <Modal
        {...modalProps}
        visible={visible}
        footer={null}
        destroyOnClose={false}
        onCancel={handleCancel}
      >
        <Component onOk={handleOk} />
      </Modal>
    </>
  );
}
